<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" formType="add" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <FilterTable
      ref="table"
      columnsRef="finance_repairFinance_receivables_receiptsDetail_table1"
      height="auto"
      :isSelectColumn="false"
      :isPagination="false"
      :columns="columns"
      :dataSource="receiptDataSource"
      selectionType="single"
      :datakey="'rows'"
      :onRowSelectChange="columns => (this.selectColumns = columns)"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <FilterTable
      ref="table1"
      columnsRef="finance_repairFinance_receivables_receiptsDetail_table2"
      height="auto"
      :isSelectColumn="false"
      :isPagination="false"
      :columns="columns1"
      :dataSource="reduceDataSource"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns1 = columns)"
      style="margin-top:10px"
      :onSyncTableData="tableHandle"
    ></FilterTable>
    <!-- 打印 -->
    <!-- <BasePrint ref="print" :data="printList" template="templateReceiptsDetail" /> -->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button type="primary" @click="printClick">打印收据</el-button>
      <!-- <el-button type="primary" :disabled="disable" @click="saveChange">确 定</el-button> -->
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getDealerUser, getInvoiceType, editSave } from '@/api/finance/repair/receivables';
import { getAllUser } from '@/api/finance/advancesReceived/register';
import { getReceiptRecord } from '@/api/repair/repairFinance/index.js';
import moment from 'moment';
export default {
  name: 'ReceiptsDetail',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      index: null,
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      columns1: this.createTableColumns1(),
      receiptDataSource: [],
      reduceDataSource: [],
      selectColumns: [],
      printList: {},
      tableData: []
    };
  },
  computed: {},
  created() {
    this.formList.forEach(x => {
      x.initialValue = this.rowData[x.fieldName];
    });
  },
  mounted() {
    this.serviceConsultant(); // 服务顾问下拉
    this.getInvoiceType(); // 发票类型下拉
    this.getReceiptRecord(); // 获取收费信息
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '结算单号',
          fieldName: 'BALANCE_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '收费对象代码',
          fieldName: 'PAYMENT_OBJECT_CODE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '收费对象名称',
          fieldName: 'PAYMENT_OBJECT_NAME',
          disabled: true
        },

        {
          type: 'INPUT',
          label: '应收账款',
          fieldName: 'RECEIVABLE_AMOUNT',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '未收账款',
          fieldName: 'NOT_RECEIVED_AMOUNT',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '已收账款',
          fieldName: 'RECEIVED_AMOUNT',
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '收款单号',
          dataIndex: 'RECEIVE_NO',
          sorter: true
        },
        {
          title: '收款日期',
          dataIndex: 'RECEIVE_DATE',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          width: 150
        },
        {
          title: '收款金额',
          dataIndex: 'RECEIVE_AMOUNT',
          sorter: true,
          precision: 2
        },
        {
          title: '是否销帐',
          dataIndex: 'WRITEOFF_TAG',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.WRITEOFF_TAG, '1004')}</span>;
          }
        },
        {
          title: '经手人',
          dataIndex: 'HANDLER',
          sorter: true,
          dictItems: []
        },
        {
          title: '付款方式',
          dataIndex: 'PAY_TYPE_CODE',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.PAY_TYPE_CODE, '8044')}</span>;
          }
        },
        {
          title: '本次使用余款',
          dataIndex: 'USE_PRE_PAY',
          sorter: true
        },
        {
          title: '是否开票',
          dataIndex: 'INVOICE_TAG',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.INVOICE_TAG, '1004')}</span>;
          }
        },
        {
          title: '发票类型',
          dataIndex: 'INVOICE_TYPE_CODES',
          sorter: true,
          render: props => {
            let dict = this.createDictList('1111');
            // 翻译发票类型
            let str = props.row.INVOICE_TYPE_CODES;
            if (props.row.INVOICE_TYPE_CODES.length) {
              let types = props.row.INVOICE_TYPE_CODES.split(',');
              let result = [];
              types.forEach(x => {
                let item = dict.find(item => item.value == x);
                if (item) {
                  result.push(item.text);
                }
              });
              str = result.join(',');
            }
            return <div>{str}</div>;
          }
        },
        {
          title: '发票号码',
          dataIndex: 'INVOICE_NOS',
          sorter: true
        },
        {
          title: '开票人',
          dataIndex: 'INVOICE_MAKER',
          sorter: true,
          dictItems: []
        },
        {
          title: '支票号码',
          dataIndex: 'CHECK_NO',
          sorter: true
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true,
          editable: true
          // defaultEditable: true,
          // editType: 'input'
        }
      ];
    },
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '减免单号',
          dataIndex: 'DERATE_NO',
          sorter: true
        },
        {
          title: '减免金额',
          dataIndex: 'DERATE_AMOUNT',
          precision: 2,
          sorter: true
        },
        {
          title: '减免日期',
          dataIndex: 'DERATE_DATE',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          width: 150
        },
        {
          title: '减免批准人',
          dataIndex: 'DERATE_RATIFIER',
          sorter: true,
          dictItems: []
        },
        {
          title: '经手人',
          dataIndex: 'HANDLER',
          sorter: true,
          dictItems: []
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true
        }
      ];
    },

    formChangeHandle(val) {},
    async serviceConsultant() {
      const res = await getDealerUser();
      console.log(res, '所有用户');
      let allUser = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'HANDLER').dictItems = allUser;
      this.columns1.find(item => item.dataIndex === 'HANDLER').dictItems = allUser;
      this.columns.find(item => item.dataIndex === 'INVOICE_MAKER').dictItems = allUser;
      this.columns1.find(item => item.dataIndex === 'DERATE_RATIFIER').dictItems = allUser;
    },
    async getReceiptRecord() {
      const res = await getReceiptRecord({ balaPayobjId: this.rowData.BALA_PAYOBJ_ID });
      if (res.resultCode == 200) {
        this.receiptDataSource = res.data.receiveDetail;
        this.reduceDataSource = res.data.derateDetail;
      }
    },

    async getInvoiceType() {
      const res = await getInvoiceType();
      // console.log(res)
      // this.columns2.find(item => item.dataIndex === 'INVOICE_TYPE_CODE').editItems = res.data.map(x => ({ value: x.INVOICE_TYPE_CODE, text: x.INVOICE_TYPE_NAME }));
    },
    async saveChange() {
      let data = {
        gatheringList: this.$refs.table.$refs.pageTable.dataSource,
        remark: 'edit'
      };
      console.log('data', data);
      this.$confirm('是否确认保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await editSave(data);
          // console.log("res",res)
          if (res.resultCode == 200) {
            this.$notify.success({ title: '提示信息', message: '保存成功!' });
            this.closeDialog();
          }
          this.deleteRows = [];
        })
        .catch(() => {});
    },
    closeDialog() {
      this.$emit('close', false);
    },

    // 打印
    async printClick() {
      // if (this.selectColumns.length) {
      //   console.log(this.selectColumns, 'selectColumns');
      //   console.log(this.tableData, '减免金额的数据-----');
      //   let deratedAmount = 0;
      //   if (this.tableData.length !== 0) {
      //     this.tableData.forEach(x => {
      //       deratedAmount += Number(x.DERATE_AMOUNT);
      //     });
      //   }
      //   console.log(deratedAmount, '减免金额----');
      //   this.printList['BALANCE_NO'] = this.formList.find(item => item.fieldName === 'BALANCE_NO').initialValue;
      //   this.printList['OWNER_NAME'] = this.formList.find(item => item.fieldName === 'OWNER_NAME').initialValue;
      //   this.printList['VIN'] = this.formList.find(item => item.fieldName === 'VIN').initialValue;
      //   this.printList['RECEIVE_DATE'] = !this.selectColumns[0].RECEIVE_DATE ? '' : moment(this.selectColumns[0].RECEIVE_DATE).format('YYYY-MM-DD HH:mm:ss');
      //   this.printList['RECEIVE_NO'] = this.selectColumns[0].RECEIVE_NO;
      //   this.printList['PAY_TYPE_CODE'] = this.createDictText(this.selectColumns[0].PAY_TYPE_CODE, '8044');
      //   this.printList['PAYOUT_AMOUNT'] = Number(this.selectColumns[0].PAYOUT_AMOUNT).toFixed(2);
      //   this.printList['RECEIVE_AMOUNT'] = Number(this.selectColumns[0].RECEIVE_AMOUNT).toFixed(2);
      //   this.printList['DERATE_AMOUNT'] = Number(deratedAmount).toFixed(2);
      //   this.$nextTick(() => {
      //     this.$refs.print.EXCUTE_PRINT();
      //   });
      // } else {
      //   this.$notify.warning({ title: '提示信息', message: '请选择表格数据!' });
      // }
    },
    // table动态回调函数
    tableHandle(val) {
      this.tableData = val;
    }
  }
};
</script>

<style lang="less" scoped></style>
